<template>
  <div>
      <div class="topBoxEmpty"></div>
      <div class="topBox">
        <four-steps :step="2" ref="changeStep"></four-steps>
        <div class="choLab" v-if="stepData" v-cloak>
          <span class="chLaSpan" v-html="stepData.one.area.name"></span>
          <span class="chLaSpan" v-html="stepData.one.hx.name"></span>
          <span class="chLaSpan" v-html="stepData.one.priBet[0]+'-'+stepData.one.priBet[1]+'万'"></span>
          <img src="@/assets/images/right_jian.png" alt="" @click="cutStep(2)">
        </div>
      </div>
      <div class="continer" v-if="detailData">
        <span class="roomTitle">{{detailData.Subject_subject}}</span>
        <span class="roomLab">{{detailData.Subject_area}}平丨{{detailData.Subject_price}}丨{{detailData.Subject_housetype}}</span>
        <span class="title1">设计理念</span>
        <span class="redLine"></span>
        <p class="secText">{{detailData.Subject_description}}</p>
        <div class="titImgBox" v-for="(item,index) in detailData.file_info" :key="index">
          <span class="title2">{{item.File_des}}</span>
          <img class="roomImg"  :src="'http://artwork.dyrs.cc'+item.File_imgfile+'!l'" alt="">
        </div>
        <span class="backBtn" @click="back">返回初选</span>
      </div>
    <!-- 底部 -->
    <empty-tabbar></empty-tabbar>
    <tabbar></tabbar>
  </div>
</template>
<script>
import Tabbar from '@/pages/home/components/Tabbar'
import emptyTabbar from '@/pages/home/components/emptyTabbar'
import FourSteps from './components/FourSteps'
import utils from '@/assets/scripts/utils'

export default {
  name: 'roomDetails',
  components: {
      Tabbar,emptyTabbar,FourSteps
  },
  data() {
    return {
      stepData:null,
      detailData:null,
      param: {
        callbackQuery: "callback", // jsonp key //请求传递参数 1
        callbackName: "jsonpCallback", // jsonp key //请求传递参数 2
        timestamp: Date.parse(new Date()) / 1000,
        token: this.$md5(
          this.$md5("dyrs_$&*2019") + Date.parse(new Date()) / 1000
        ),
        response_type: 'jsonp'
      }
    }
  },
  methods: {
    cutStep(){//重新选择
      this.$router.replace({name:'Decorate',params:{
        step:2
      }})
    },
    back(){//返回初选
      this.$router.replace({name:'Decorate',params:{
        step:2
      }})
      // this.$router.go(-1);
    },
    getDetail(res){//获取案例详情
      var param = this.param;
      param.subject_id = this.stepData.subject_id;
      this.$jsonp(
        this.$store.state.categoryUrl + "/photo/subjectDetails",
        this.param
      ).then(res => {
        this.$set(this, "detailData", res[2]);
      });
    }
  },
  created(){
    this.$nextTick(() => {
      window.scrollTo(0,0);
      this.$refs.changeStep.changeStep(2);
      var stepData = this.$route.params.stepData
      this.stepData = JSON.parse(stepData)
      // 获取案例详情
      this.getDetail();
    })
  },
  mounted(){
    
    // console.log(stepData)
    // this.stepData = stepData
    // let stepData = utils.getUrlKey('stepData');
    
  },
  beforeRouteEnter(to,from,next){
    next(vm=>{
      // vm.stepData = JSON.parse(to.query.stepData)
      // this.stepData = JSON.parse(to.query.stepData)
    })
  }
}
</script>

<style lang="stylus" scoped>
  .topBoxEmpty
    height 300px
  .topBox
    position fixed
    left 0
    top 0
    width 100%
    z-index 66
    height 300px
    box-shadow 0 0 10px 2px #f4f4f4
    box-sizing border-box
    padding-top 62px
    display flex
    flex-direction column
    align-items center
    margin-bottom 15px
    background url(../../assets/images/bg1.png)
    background-size 100% 100%
    .choLab
      width 628px
      display flex
      align-items center
      justify-content space-between
      margin-top 25px
      box-sizing border-box
      padding 0 20px
      .chLaSpan
        display block
        width 176px
        height 60px
        box-sizing border-box
        text-align center
        line-height 60px
        font-size 22px
        color #ffffff
        border 2px solid #dddddd
        border-radius 30px
      img
        width 13px
        height 24px
  .continer
    width 100%
    display flex
    align-items center
    flex-direction column
    .roomTitle
      line-height 30px
      font-size 30px
      font-weight bold
      color #333333
      letter-spacing 1px;/*no*/
      margin 20px 0
      max-width 70%
      text-align center
    .roomLab
      line-height 22px
      font-size 22px
      color #666666
      margin-bottom 66px
    .title1
      line-height 28px
      font-size 28px;
      font-weight bold
      color #333333
      letter-spacing 1px;/*no*/
      margin-bottom 9px
    .redLine
      display block
      width 30px
      height 4px
      background #ce0021
    .secText
      width 600px
      line-height 30px
      font-size 22px
      color #666666
      margin-top 20px
      text-indent:44px;
    .titImgBox
      display flex
      align-items center
      flex-direction column
      .title2
        line-height 24px
        font-size 24px
        color #333333
        letter-spacing 1px
        font-weight bold
        margin 50px 0 30px
      .roomImg
        width 628px
        height auto
  .backBtn
    display block
    width 628px
    height 80px
    line-height 80px
    fong-size 28px
    color #ffffff
    letter-spacing 1px
    text-align center
    border-radius 10px
    background #ce0021
    margin 30px 0 40px
</style>